import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormCheckbox, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Table, Upload,Tabs, Image, Descriptions, Timeline } from "antd";
import { useState } from "react";
import process from '@/assets/imgs/process.png';
import { UploadOutlined } from "@ant-design/icons";

export default () => {
  const [showDetail,setShowDetail] = useState(false);
  const [showTransfor,setShowTransfor] = useState(false);
  const [proData,setProData]  =useState<any>([{id:'1',pIndex:1},{id:'2',pIndex:2}]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [tabKey,setTabKey] = useState("1");
  const [showFollow,setShowFollow] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const columns:ProColumns[] = [
    {
      title:'性质',
      dataIndex: 'name11',
      ellipsis:true,
      width:100,
    },
    {
      title:'MPC编码',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'MPC20230901'
    },
    {
      title:'MPC来源',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'客户介绍'
    },
    {
      title:'MPC进程状态',
      dataIndex: 'name',
      ellipsis:true,
      valueType:'select',
      valueEnum:{
        '临床意向':'临床意向',
        '临床报告':'临床报告',
        '医院论证结束':'医院论证结束',
        '需求上网':'需求上网',
        '招标上网':'招标上网',
        '中标公示':'中标公示',
      },
      width:150,
      renderText:()=>'临床意向'
    },
    {
      title:'医院编码',
      dataIndex: 'name1',
      width:100,
      renderText:()=>'AC0000'
    },
    {
      title:'区域',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'North'
    },
    {
      title:'省份',
      dataIndex: 'date4',
      width:100,
      renderText:()=>'北京市'
    },
    {
      title:'区域负责人',
      dataIndex: 'date5',
      width:100,
      renderText:()=>'张三'
    },
    {
      title:'销售',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'李四'
    },
    {
      title:'医院名称',
      ellipsis:true,
      width:100,
      dataIndex: 'name3',
      renderText:()=>'北京市XXXX医院'
    },
    {
      title:'第一应用临床科室',
      width:150,
      hideInSearch:true,
      ellipsis:true,
      dataIndex: 'name4',
      renderText:()=>'xx01'
    },
    {
      title:'科室关键人',
      hideInSearch:true,
      width:100,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'xx01'
    },
    {
      title:'第二临床应用科室',
      width:150,
      hideInSearch:true,
      ellipsis:true,
      dataIndex: 'name4',
      renderText:()=>'xx01'
    },
    {
      title:'科室关键人',
      hideInSearch:true,
      width:100,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'xx01'
    },
    {
      title:'第三临床应用科室',
      width:150,
      hideInSearch:true,
      ellipsis:true,
      dataIndex: 'name4',
      renderText:()=>'xx01'
    },
    {
      title:'科室关键人',
      hideInSearch:true,
      width:100,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'xx01'
    },
    {
      title:'是否拜访临床科室',
      hideInSearch:true,
      width:150,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'是'
    },
    {
      title:'是否拜访设备科',
      hideInSearch:true,
      width:150,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'是'
    },
    {
      title:'是否拜访院级领导',
      hideInSearch:true,
      width:150,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'是'
    },
    {
      title:'是否拜访决策人',
      hideInSearch:true,
      width:150,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'是'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:180,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  const aColumn:ProColumns[] = [
    {
      title:'跟进方式',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'打电话'
    },
    {
      title:'跟进内容',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'线下拜访了客户'
    },
    {
      title:'跟进时间',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'2023-05-10'
    },
    {
      title:'下次联系时间',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'2023-05-12'
    },
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
      dataSource={[{}]}
      scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      toolbar={{settings:[]}}
      search={{span:6}}
      />

<DrawerForm title='详情' width={1100} visible={showDetail}  labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <div style={{fontWeight:'bold',fontSize:16,marginBottom:10}}>基本信息</div>
          <ProFormGroup>
              <ProFormSelect width='md' name='1' label='性质'></ProFormSelect>
              <ProFormSelect width='md' name='2' label='MPC来源' options={[{label:'电话咨询',value:'0'},{label:'邮件咨询',value:'1'},{label:'客户介绍',value:'2'},{label:'广告',value:'3'},{label:'官网',value:'6'},{label:'展会',value:'7'}]}></ProFormSelect>
              <ProFormSelect width='md' name='3' label='医院名称'></ProFormSelect>
              <ProFormSelect width='md' name='4' label='区域负责人'></ProFormSelect>
              <ProFormSelect width='md' name='5' label='销售'></ProFormSelect>
              <ProFormSelect width='md' name='2' label='MPC进程状态' options={[{label:'临床意向',value:'0'},{label:'临床报告',value:'1'},{label:'医院论证结束',value:'2'},{label:'需求上网',value:'3'},{label:'招标上网',value:'6'},{label:'中标公示',value:'7'}]}></ProFormSelect>
          </ProFormGroup>
          <div style={{fontWeight:'bold',fontSize:16,marginBottom:10}}>科室信息</div>
          <ProFormGroup>
              <ProFormText width='md' name='11' label='第一临床应用科室'/>
              <ProFormText width='md' name='12' label='科室关键人'/>
              <ProFormText width='md' name='13' label='第二临床应用科室'/>
              <ProFormText width='md' name='14' label='科室关键人'/>
              <ProFormText width='md' name='15' label='第二临床应用科室'/>
              <ProFormText width='md' name='16' label='科室关键人'/>
          </ProFormGroup>

          <div style={{fontWeight:'bold',fontSize:16,marginBottom:10}}>拜访信息</div>
          <ProFormGroup>
            <ProFormCheckbox.Group name='target' width={'md'}  label='拜访对象' options={['临床科室','设备科','院领导','决策人']}/>

          </ProFormGroup>
          <div style={{fontWeight:'bold',fontSize:16,marginBottom:10}}>试用信息</div>
          <ProFormGroup>
            <ProFormTextArea width='lg' name='31' label='机器人-研究者发起需求'/>
            <ProFormTextArea width='lg' name='32' label='腔镜-试用需求'/>
            <ProFormDatePicker width='md' name='33' label='预计试用具体月份'/>
            <ProFormSelect width='md' name='34' label='试用是否批复' options={[{label:'是',value:'1'},{label:'否',value:'2'}]}></ProFormSelect>
            <ProFormSelect width='md' name='35' label='是否有配置证' options={[{label:'是',value:'1'},{label:'否',value:'2'}]}></ProFormSelect>
          </ProFormGroup>
          <div style={{fontWeight:'bold',fontSize:16,marginBottom:10}}>其他信息</div>
          <ProFormGroup>
              <ProFormDigit width='md' name='41' label='赢率'/>
              <ProFormDigit width='md' name='42' label='项目预算'/>
              <ProFormSelect width='md' name='43' label='资金是否审批' options={[{label:'是',value:'1'},{label:'否',value:'2'}]}></ProFormSelect>
              <ProFormDatePicker width='md' name='44' label='预计招标时间'/>
              <ProFormText width='md' name='46' label='代理商'/>
              <ProFormText width='md' name='47' label='产品'/>
              <ProFormText width='md' name='48' label='主要竞争对手'/>
              <ProFormText width='md' name='49' label='主要竞争对手'/>
              <ProFormText width='md' name='490' label='竞争对手型号'/>
          </ProFormGroup>
          <ProFormTextArea width='lg' name='45' label='项目进展'/>
          <Upload
              fileList={[]}
              showUploadList={{showRemoveIcon:false}}
            >
               <Button  icon={<UploadOutlined />}>上传附件</Button>
            </Upload>
 </DrawerForm>
                        
    
    </PageContainer>)
}